<template>
  <div class="blessing-message-pagination">
    <ul
      class="
        d-flex
        align-items-center
        h-100
        justify-content-center justify-content-md-start
      "
    >
      <li
        class="page-arrow pr-3 pr-md-4"
        :class="{ 'page-arrow--disable': currentPage === 1 }"
        @click="pageMove(-1)"
      >
        <div class="i page-arrow__left"></div>
      </li>
      <template v-for="(item, index) in pageArray" :key="`${item}-${index}`">
        <li
          v-if="item === 'Ellipsis'"
          class="page-ellipsis flex-center"
        ></li>
        <li
          v-else
          class="page-item flex-center"
          :class="{ 'page-item--active': item === currentPage }"
          @click="changePage(item)"
        >
          {{ item }}
        </li>
      </template>
      <li
        class="page-arrow pl-3 pl-md-4"
        :class="{ 'page-arrow--disable': currentPage === totalPage }"
        @click="pageMove(1)"
      >
        <div class="i page-arrow__right"></div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

defineOptions({
  name: 'BlessingMessagePagination'
})

interface Props {
  totalPage?: number
  currentPage?: number
}

const props = withDefaults(defineProps<Props>(), {
  totalPage: 1,
  currentPage: 1
})

const emit = defineEmits<{
  changePage: [page: number]
}>()

const pageArray = computed(() => {
  const arr: (number | string)[] = []
  let ellipsis = false
  for (let i = 1; i <= props.totalPage; i++) {
    if (!showPage(i)) {
      if (!ellipsis) {
        arr.push('Ellipsis')
        ellipsis = true
      }
    } else {
      ellipsis = false
      arr.push(i)
    }
  }

  if (arr[0] === 'Ellipsis') arr.shift()
  return arr
})

const changePage = (page: number) => {
  emit('changePage', page)
}

const pageMove = (move: number) => {
  if (move < 0) {
    if (props.currentPage > 1) {
      changePage(props.currentPage + move)
    }
  } else {
    if (props.currentPage < props.totalPage) {
      changePage(props.currentPage + move)
    }
  }
}

const showPage = (page: number): boolean => {
  if (props.totalPage <= 6) return true
  if (
    (page <= props.currentPage + 2 && page >= props.currentPage) ||
    page === props.totalPage
  )
    return true
  if (
    props.currentPage >= props.totalPage - 3 &&
    (page >= props.totalPage - 2 || page === 1)
  )
    return true
  return false
}
</script>

<style lang="scss" scoped>
.d-flex {
  display: flex!important
}

.align-items-center {
  align-items: center!important
}

.justify-content-center {
  justify-content: center!important
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.h-100 {
  height: 100%!important
}

.i {
  position: relative
}

.i:after,.i:before {
  content: "";
  display: inline-block;
  vertical-align: middle
}

@media (min-width: 768px) {
  .justify-content-md-start {
    justify-content: flex-start!important
  }
}

.blessing-message-pagination {
  height: 31px;
}

.blessing-message-pagination .page-arrow,
.blessing-message-pagination .page-item {
  cursor: pointer;
}

.blessing-message-pagination .page-ellipsis {
  width: 24px;
}

.blessing-message-pagination .page-ellipsis::after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #1a1c20;
  opacity: 0.2;
}

.blessing-message-pagination .page-item {
  font-size: 14px;
  line-height: 1.79;
  font-weight: 400;
  width: 26px;
  height: 26px;
  color: var(--text-color--primary, #0032A0);
  background-color: transparent;
  margin: 0 5.5px;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

.blessing-message-pagination .page-arrow--disable .page-arrow__left,
.blessing-message-pagination .page-arrow--disable .page-arrow__right {
  opacity: 0;
  pointer-events: none;
}

.blessing-message-pagination .page-arrow__left,
.blessing-message-pagination .page-arrow__right {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.blessing-message-pagination .page-arrow__left::before,
.blessing-message-pagination .page-arrow__right::before {
  content: '';
  width: 24px;
  height: 24px;
  background: url('@/assets/icon-arrow-pagination-right.svg') center center no-repeat;
  background-size: 100% auto;
  transition: transform 0.4s ease;
}

.blessing-message-pagination .page-arrow__left {
  transform: scale(-1);
  margin-right: 5.5px;
}

.blessing-message-pagination .page-arrow__right {
  margin-left: 5.5px;
}

.blessing-message-pagination .page-item:hover,
.blessing-message-pagination .page-item--active {
  color: #ffffff;
  background-color: var(--text-color--primary, #0032A0);
}
</style>